<template>
  <div id='updateLog'>
    <div class="card-container">
      <el-table v-loading="loading" :data="dataLsit">
      <el-table-column label="推送时间" width="180" show-overflow-tooltip align="center" prop="pushTime" />
      <el-table-column label="推送人" align="center" prop="pushBy">
        <template slot-scope="scope">
          <span style="color:#409EFF;">{{ scope.row.pushBy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推送总数" align="center" prop="totalCount" />
      <el-table-column label="推送成功数" align="center" prop="successCount" />
      <el-table-column label="推送失败数" align="center" prop="failCount">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleCheck(scope.row, '0')">
            {{ scope.row.failCount }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleCheck(scope.row)">
            查看</el-button>
          <el-button size="mini" type="text" @click="handleJson(scope.row)">
            报文</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    </div>
    
    <el-dialog title="报文" append-to-body :visible.sync="jsonVisible" width="30%">
      <div class="card-container">
        <json-viewer :value="messageData" :expand-depth="5" copyable boxed expanded sort></json-viewer>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPushLog } from "@/api/rehearsal/index.js";

export default {
  name: 'updateLog',
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      jsonVisible: false,
      messageData:{},
      loading: true,
      dataLsit: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    handleJson(row) {
      this.jsonVisible = true
      if (row.jsonData?.indexOf('{') != -1) {
        this.messageData = JSON.parse(row.jsonData)
      } else {
        this.messageData = row.jsonData
      }
    },
    async getList() {
      const res = await getPushLog(this.row.msgId);
      if (res.code == 200) {
        this.dataLsit = res.rows;
        this.total = res.total;
        this.loading = false;
      }
    },
    handleCheck(row, sta) {
      this.$emit('handleCheck', row, sta);
    },
  },
};
</script>
<style lang='scss' scoped>
#updateLog {
  width: 100%;
  height: 100%;
}
</style>